<template>
  <div id="app">
    <h1>
      <span>剩余雷数：{{leiNumber}}</span>
      <el-button type="success" round @click="startGame">开始游戏</el-button>
      <el-button type="success" round @click="changeCurrent(1)">初级</el-button>
      <el-button type="info" round @click="changeCurrent(2)">中级</el-button>
      <el-button type="warning" round @click="changeCurrent(3)">高级</el-button>
    </h1>
    <div class="context">
      <div v-for="(row,x) in list" :key="x" class="row">
        <item
          @rightClick="rightClick"
          :isBoom="isBoom"
          @aclick="leftClick"
          v-for="(item,y) in row"
          :key="y"
          :x="x"
          :y="y"
          :item="item"
          :push="push"
        ></item>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import Item from "./components/Item";
import _ from "lodash";
export default {
  name: "App",
  components: { Item },
  created() {
    this.initialization();
  },
  data() {
    return {
      list: null,
      isBoom: [],
      qi: [],
      current: 1,
      push: []
    };
  },
  methods: {
    // 初始化游戏
    initialization() {
      const obj = {
        isShow: true,
        item: 0,
        isChecked: false
      };
      let a;
      let b;
      switch (this.current) {
        case 1:
          a = 9;
          b = 9;
          break;
        case 2:
          a = 16;
          b = 16;
          break;
        case 3:
          a = 30;
          b = 16;
          break;
      }
      const arr = Array.from(new Array(a), () => {
        return { ...obj };
      });
      const arr1 = Array.from(new Array(b), () => {
        const arr2 = _.cloneDeep(arr);
        return arr2;
      });
      this.list = arr1;
      this.createdBoom();
      this.initializeNumber();
    },
    // 创建炸弹
    createdBoom() {
      let arr = [];
      let x;
      let y;
      let z;
      switch (this.current) {
        case 1:
          x = 9;
          y = 9;
          z = 10;
          break;
        case 2:
          x = 16;
          y = 16;
          z = 40;
          break;
        case 3:
          x = 16;
          y = 30;
          z = 99;
          break;
      }
      while (arr.length < z) {
        const xx = Math.floor(Math.random() * x);
        const yy = Math.floor(Math.random() * y);
        if (!arr.some(item => item[0] === xx && item[1] == yy)) {
          arr.push([xx, yy]);
        }
      }
      console.log(arr);
      arr.forEach(item => {
        this.list[item[0]][item[1]].item = "boom";
      });
    },
    // 给每个格子赋值
    initializeNumber() {
      this.list.forEach((row, x) => {
        row.forEach((item, y) => {
          if (item.item !== "boom") {
            let a = 0;
            if (
              this.list[x - 1] &&
              this.list[x - 1][y - 1] &&
              this.list[x - 1][y - 1].item === "boom"
            ) {
              a++;
            }
            if (
              this.list[x - 1] &&
              this.list[x - 1][y] &&
              this.list[x - 1][y].item === "boom"
            ) {
              a++;
            }
            if (
              this.list[x - 1] &&
              this.list[x - 1][y + 1] &&
              this.list[x - 1][y + 1].item === "boom"
            ) {
              a++;
            }
            if (
              this.list[x] &&
              this.list[x][y - 1] &&
              this.list[x][y - 1].item === "boom"
            ) {
              a++;
            }
            if (
              this.list[x] &&
              this.list[x][y + 1] &&
              this.list[x][y + 1].item === "boom"
            ) {
              a++;
            }
            if (
              this.list[x + 1] &&
              this.list[x + 1][y - 1] &&
              this.list[x + 1][y - 1].item === "boom"
            ) {
              a++;
            }
            if (
              this.list[x + 1] &&
              this.list[x + 1][y] &&
              this.list[x + 1][y].item === "boom"
            ) {
              a++;
            }
            if (
              this.list[x + 1] &&
              this.list[x + 1][y + 1] &&
              this.list[x + 1][y + 1].item === "boom"
            ) {
              a++;
            }
            this.list[x][y].item = a;
          }
        });
      });
    },
    // 左键点击事件
    leftClick(x, y, isOk) {
      if (!this.list[x] || !this.list[x][y]) return;
      // 被标记
      if (this.list[x][y].isChecked === true) return;
      if (this.list[x][y].isShow) {
        this.list[x][y].isShow = false;
        // 游戏结束
        if (this.list[x][y].item == "boom") {
          this.list.forEach(row => {
            row.forEach(item => {
              item.isShow = false;
            });
          });
          this.isBoom = [x, y];
          this.list.forEach(row => {
            row.forEach(item => {
              item.isChecked = false;
            });
          });
          Message.closeAll();
          return Message("游戏结束");
        } else if (this.list[x][y].item === 0) {
          this.leftClick(x - 1, y - 1);
          this.leftClick(x - 1, y);
          this.leftClick(x - 1, y + 1);
          this.leftClick(x, y - 1);
          this.leftClick(x, y + 1);
          this.leftClick(x + 1, y - 1);
          this.leftClick(x + 1, y);
          this.leftClick(x + 1, y + 1);
        }
        this.succuss();
      } else {
        if (this.list[x][y].item === 0) return;
        else {
          if (isOk) this.clickNumber(x, y);
        }
      }
    },
    //右击事件
    rightClick(x, y) {
      if (this.list[x][y].isShow === false && this.list[x][y] === 0) return;
      if (this.list[x][y].isShow === false && this.list[x][y] !== 0) {
        return this.clickNumber(x, y);
      }
      if (this.list[x][y].isChecked === true) {
        this.list[x][y].isChecked = false;
      } else {
        let a;
        switch (this.current) {
          case 1:
            a = 10;
            break;
          case 2:
            a = 40;
            break;
          case 3:
            a = 99;
            break;
        }
        if (this.qiNumber < a) this.list[x][y].isChecked = true;
      }
    },
    // 检验成功条件
    succuss() {
      const arr = [];
      this.list.forEach(row => {
        row.forEach(item => {
          if (item.item !== "boom") {
            arr.push(item);
          }
        });
      });
      const result = arr.every(item => {
        return item.isShow === false;
      });
      if (result) {
        this.$alert("恭喜你过关了", "挑战成功", {
          confirmButtonText: "确定"
        });
        this.list.forEach(row => {
          row.forEach(item => {
            if (item.item === "boom") {
              item.isChecked = true;
            }
          });
        });
      }
    },
    // 点击数字
    clickNumber(x, y) {
      if (this.list[x][y].item === 0) return;
      const arr = [];
      if (this.list[x - 1] && this.list[x - 1][y - 1]) {
        arr.push([x - 1, y - 1]);
      }
      if (this.list[x - 1] && this.list[x - 1][y]) {
        arr.push([x - 1, y]);
      }
      if (this.list[x - 1] && this.list[x - 1][y + 1]) {
        arr.push([x - 1, y + 1]);
      }
      if (this.list[x] && this.list[x][y - 1]) {
        arr.push([x, y - 1]);
      }
      if (this.list[x] && this.list[x][y + 1]) {
        arr.push([x, y + 1]);
      }
      if (this.list[x + 1] && this.list[x + 1][y - 1]) {
        arr.push([x + 1, y - 1]);
      }
      if (this.list[x + 1] && this.list[x + 1][y]) {
        arr.push([x + 1, y]);
      }
      if (this.list[x + 1] && this.list[x + 1][y + 1]) {
        arr.push([x + 1, y + 1]);
      }
      let checkNumber = 0;
      arr.forEach(item => {
        if (this.list[item[0]][item[1]].isChecked) checkNumber++;
      });
      if (checkNumber >= this.list[x][y].item) {
        arr.forEach(item => {
          if (
            this.list[item[0]][item[1]].isShow &&
            !this.list[item[0]][item[1]].isChecked
          ) {
            this.leftClick(item[0], item[1]);
          }
        });
      } else {
        arr.forEach(item => {
          if (
            this.list[item[0]][item[1]].isShow &&
            !this.list[item[0]][item[1]].isChecked
          ) {
            this.push.push(item);
            setTimeout(() => {
              this.push = [];
            }, 100);
          }
        });
      }
    },
    // 切换难度
    changeCurrent(current) {
      this.current = current;
      this.initialization();
    },
    // 开始游戏
    startGame() {
      this.initialization();
    }
  },
  computed: {
    qiNumber() {
      let a = 0;
      this.list.forEach(row => {
        row.forEach(item => {
          if (item.isChecked === true) a++;
        });
      });
      return a;
    },
    leiNumber() {
      let a;
      switch (this.current) {
        case 1:
          a = 10;
          break;
        case 2:
          a = 40;
          break;
        case 3:
          a = 99;
          break;
      }
      const b = a - this.qiNumber;
      return b <= 9 ? "0" + b : b;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.row {
  display: flex;
}
h1 {
  width: 700px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.context {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
